// 给html添加点击事件
// 1.获取html
let html = document.querySelector('html');
// 定义词典
let words = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
// 2.给html添加点击事件
html.onclick = function (even) {
    // 获取鼠标位置
    console.log("鼠标位置", even.clientX, even.clientY);
    // 创建一个元素
    let span = document.createElement('span');
    // span.innerText = "♥";
    span.innerText = words[parseInt(Math.random() * words.length)];
    // 设置元素的样式
    let fontSize = 30;
    span.style.fontSize = fontSize + "px";
    span.style.position = "absolute";
    span.style.left = even.clientX - fontSize / 2 + "px";
    span.style.top = even.clientY - fontSize / 2 + "px";
    span.style.color = randomColor();
    span.style.opacity = 1;
    // 将元素添加到html中
    html.appendChild(span);

    // 定时任务修改位置，修改透明度
    let timer = setInterval(function () {
        console.log(span.style.top);
        // 修改位置
        let top = parseInt(span.style.top);
        top -= 5;
        span.style.top = top + "px";
        // 修改透明度
        let opacity = parseFloat(span.style.opacity);
        opacity -= 0.1;
        span.style.opacity = opacity;

        if (opacity <= 0) {
            // 移除元素
            html.removeChild(span);
            // 清除定时任务
            clearInterval(timer);
        }
    }, 100);

}

function randomColor() {
    let r = parseInt(Math.random() * 256);
    let g = parseInt(Math.random() * 256);
    let b = parseInt(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

// 添加监听事件，监听点击行为
// html.addEventListener('click', function () {
//     console.log("鼠标点击");
// });